<template>
    <div>
        <el-card class="box-card">
            <el-row slot="header" :gutter="20" flex="main:center cross:center">
                <el-col :span="5">
                    <el-button size="small" type="primary" @click="add">新增计划</el-button>
                </el-col>
                <el-col :span="15"
                    >时间
                    <el-date-picker type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
                </el-col>
                <el-col :span="3">
                    <el-button size="small" type="primary" @click="download">下载报表</el-button>
                </el-col>
            </el-row>
            <el-table :data="listData" border style="width: 100%">
                <el-table-column align="center" label="编号" width="60" type="index"> </el-table-column>
                <el-table-column prop="loginname" align="center" label="投放计划名称" width="90"> </el-table-column>
                <el-table-column prop="nickname" align="center" label="计划ID" width="90"> </el-table-column>
                <el-table-column prop="email" align="center" label="创建时间" width="90"> </el-table-column>
                <el-table-column prop="cellphone" align="center" label="投放状态" width="90"> </el-table-column>
                <el-table-column prop="sex" align="center" label="推广目标" width="90"> </el-table-column>
                <el-table-column prop="sex" align="center" label="广告类型" width="90"> </el-table-column>
                <el-table-column prop="sex" align="center" label="定向投放" width="90"> </el-table-column>
                <el-table-column prop="sex" align="center" label="推广素材" width="90"> </el-table-column>
                <el-table-column prop="sex" align="center" label="审核状态" width="90"> </el-table-column>
                <el-table-column prop="sex" align="center" label="原因说明" width="90"> </el-table-column>
                <el-table-column prop="sex" align="center" label="展现数量" width="90"> </el-table-column>
                <el-table-column align="center" label="操作" width="97">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="edit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="del(scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-row>
                <div>
                    <el-col :span="2">
                        <el-pagination class="pag" background layout="prev, pager, next" :total="100"> </el-pagination>
                    </el-col>
                </div>
            </el-row>
            <Add-dialog :visible.sync="dialogVisible" />
        </el-card>
    </div>
</template>

<script>
import AddDialog from "../promotion/Dialog";
export default {
    components: {
        AddDialog
    },
    data() {
        return {
            dialogVisible: false,
            listData: [
                { time: new Date(), id: 1, loginname: "Admin", nickname: "管理员", email: "Admin@.admin.com", cellphone: "151178xxxx", sex: "male", active: 1 },
                {
                    time: new Date(),
                    id: 2,
                    loginname: "SenLin",
                    nickname: "森林",
                    email: "SenLin@.admin.com",
                    cellphone: "151178xxxx",
                    sex: "unknown",
                    active: 0
                },
                { time: new Date(), id: 4, loginname: "Admin1", nickname: "赵晓", email: "Admin@.admin.com", cellphone: "151178xxxx", sex: "male", active: 1 },
                { time: new Date(), id: 5, loginname: "Wujun", nickname: "吴军", email: "Admin@.admin.com", cellphone: "151178xxxx", sex: "male", active: 1 },
                { time: new Date(), id: 6, loginname: "Huang", nickname: "黄家", email: "Admin@.admin.com", cellphone: "151178xxxx", sex: "male", active: 1 }
            ]
        };
    },

    methods: {
        onAdd() {
            this.dialogVisible = true;
        },
        add: function() {
            var a = {
                time: new Date(),
                id: 1,
                loginname: "Admin",
                nickname: "管理员",
                email: "Admin@.admin.com",
                cellphone: "151178xxxx",
                sex: "male",
                active: 1
            };
            this.listData.push(a);
        },
        edit: function() {},
        del: function(index) {
            this.listData.splice(index, 1);
        },
        download() {}
    }
};
</script>

<style scoped lang="less"></style>
